<template>
	<view>
		<view style="width: 100vw;height: 30vh;">
			<image src="/static/images/LYqhY_03.png"style="width: 100vw;height: 30vh;" mode=""></image>
		</view>
		<!-- 商品图片 -->
		<image src="/static/images/Lkq.png" style="width: 30vw;height: 21vh;position: absolute;top: 2vh;left:34vw;" mode=""></image>
		<!-- 正在砍价 -->
		<view class="whole">
			<view
				style="border-radius: 0 0 10rpx 10rpx; width: 263rpx;height: 50rpx;background-color: #fff;margin-left: 32%;color: #9A5A30;font-size: 25rpx;display: flex;">
				<uni-countdown color="#9A5A30" border-color="red" :showDay="false" :hour="2" :minute="30" :second="0">
				</uni-countdown> <text>后过期</text>
			</view>
			<view style="font-weight: 600;font-size: 30rpx;color: #6B5A43;margin-top: 40rpx;">
				<text>已有<text style="color: red;">4</text>人参团，仅差<text style="color: red;">2</text>人</text>
			</view>
			<view style="color: red;font-size: 90rpx;font-weight: 600;">
				2
			</view>
			<view style="width: 90%;margin-left: 5%;margin-top: 20rpx;">
				<ai-progress :percentage="66" bg-color="#F54F3B" :stroke-width="25" :noData="true"></ai-progress>
			</view>
			<button type="default" @click="open" class="but">邀请好友拼团</button>
		</view>
		<view class="list">
			<view class="list_top">
				<text style="font-weight: 600;font-size: 40rpx;margin-left: 8%;color: #C93708;">拼团记录</text>
			</view>
			<view class="list_li" v-for="(item,index) in 6">
				<image :lazy-load="true" class="img"
					src="http://i0.hdslb.com/bfs/article/1807ab7c0533474539df628039eec2a1348d9953.jpg" mode=""></image>
				<view class="list_li_text">
					<text style="color: #765F1D;">快乐生活</text>
					<text style="color: #C93708;font-weight: 600;margin-left: 35%;">发起拼团</text>
					<text style="color: #836E31;margin-left: 2%;">(6人团)</text>
				</view>
			</view>
		
		</view>
		<uni-popup ref="popup" type="bottom" background-color="#fff;" mask-background-color="rgba(0,0,0,.9)">
			<view class="user_img">
				<view>
					<image src="/static/images/取消.png" @click="close" class="cancel"></image>
				</view>
				<image src="/static/images/取消.png" style="width: 100%;height: 100%;"></image>
			</view>
			<view class="pop">
				<view style="font-weight: 600;font-size: 42rpx;margin-top: 40rpx;">
					<text style="color: #8C5A11;">预计再邀请<text style="color: #DF3231;">2</text>人，拼团成功</text>
				</view>
				<image src="/static/images/添加.png" class="add"></image>
				<image src="/static/images/添加.png" class="add"></image>
				<view class="but">
					<button type="default" @click="opens" style="background-color: #FB9B2D;">去微信邀请好友拼团</button>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popups" type="bottom" background-color="#fff;" mask-background-color="rgba(0,0,0,.9)">
			<view>
				<image src="/static/images/取消.png" @click="closes" class="cancel"></image>
			</view>
			<view style="width: 600rpx;height: 35vh;background-color: #fff;border-radius: 120rpx;text-align: center;">
				<image src="/static/images/复制口令.png" style="width: 300rpx;height: 240rpx;"></image>
				<view class="" style="margin-left: 22%;width: 55%;font-weight: 600;">
					去微信粘贴给好友好友帮砍后可<text style="color: #E45656;">砍大金额</text>
				</view>
				<button type="default" style="width: 90%;margin-left: 5%;background-color: #18BF64;display: flex;">
					<image src="/static/images/微信.png" style="width: 70rpx;height: 70rpx;margin-left: 26%;margin-top: 10rpx;"></image>
				<text style="color: #fff;margin-left: 5%;">去微信粘贴</text></button>
			</view>
		</uni-popup>
		
		
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		methods: {
			// 邀请好友
			open() {
				this.$refs.popup.open('center')
			},
			close() {
				this.$refs.popup.close()
			},
			
			// 复制口令
			opens() {
				this.$refs.popups.open('center')
			},
			closes() {
				this.$refs.popups.close()
			}
		}
	}
</script>


<style scoped>
	.but {
		width: 90%;
		margin-left: 5%;
		color: #fff;
		margin-top: 130rpx;
	}

	.add {
		width: 140rpx;
		height: 140rpx;
		/* background-color: #565; */
		border-radius: 50%;
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-top: 95rpx;
	}

	.cancel {
		margin-left: 90%;
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		position: absolute;
		left: 28rpx;
		top: -24rpx;
		background-color: #FFF;
	}

	.user_img {
		margin-left: 40%;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background-color: #02C4C7;
		margin-top: -60rpx;
	}

	.pop {
		width: 634rpx;
		height: 40vh;
		background-color: #fff;
		border-radius: 120rpx;
		text-align: center;
	}

	.uni-popup .uni-popup__wrapper {
		border-radius: 60rpx;
	}

	.list_li_text {
		width: 81%;
		margin-top: 45rpx;
		margin-left: 3%;
	}

	.list_li {
		height: 10vh;
		display: flex;
	}

	.img {
		width: 80rpx;
		height: 80rpx;
		background-color: #d2d2d2;
		margin-left: 5%;
		margin-top: 3%;
		border-radius: 50rpx;
	}

	.list_top {
		width: 100%;
		height: 8vh;
		background-color: #e7c68f;
		border-radius: 20rpx 20rpx 0 0;
		line-height: 8vh;
	}

	.list {
		width: 95%;
		margin-left: 3%;
		height: auto;
		background-color: #FFF9EB;
		margin-top: 10rpx;
		border-radius: 20rpx 20rpx 0 0;
	}

	.but {
		width: 90%;
		border-radius: 50rpx;
		background-color: #F96212;
		margin-top: 40rpx;
		margin-left: 5%;
		color: #fff;
	}

	.whole {
		width: 95%;
		height: 40vh;
		background-color: #FFFAEE;
		margin-left: 3%;
		border-radius: 10rpx;
		text-align: center;
	}
</style>

